<template>
    <div class="setComponent">
        <div class="form-item">
            <label>按钮内容</label>
            <input v-model="obj.value" >
        </div>
        <div class="form-item">
            <label>链接地址</label>
            <input v-model="obj.url" >
        </div>
        <div class="form-item">
            <label>按钮类型</label>
            <el-select v-model="obj.cType" placeholder="请选择">
                <el-option
                    v-for="item in Options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
            </el-select>
        </div>
        <div class="form-item">
            <label>按钮主题</label>
            <el-select v-model="obj.bType" placeholder="请选择">
                <el-option
                    v-for="item in typeOptions"
                    :key="item"
                    :label="item"
                    :value="item"/>
            </el-select>
        </div>

        <div class="form-item">
            <label>按钮大小</label>
            <el-select v-model="obj.size" placeholder="请选择">
                <el-option
                    v-for="item in sizeOptions"
                    :key="item"
                    :label="item"
                    :value="item"/>
            </el-select>
        </div>
    </div>
</template>
<script>
export default {
    name: 'SetButton',
    props: {
        obj: {
            type: Object

        }
    },
    data() {
        return {
            typeOptions: [
                'primary', 'success', 'warning ', 'danger', 'info', 'text'
            ],
            sizeOptions: [
                'medium', 'small', 'mini'
            ],
            Options: [
                { label: '默认', value: '' },
                { label: '朴素', value: 'plain' },
                { label: '圆角', value: 'round' },
                { label: '圆形', value: 'circle' }
            ]
        }
    }
}
</script>

